<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript">
			function myClick(idStr,fun)
			{
				var btn=document.getElementById(idStr);
				btn.onclick=fun;
			}
			window.onload=function()
			{
				//全选
				myClick("btn01",function()
				{
					var items=document.getElementsByName("items");
					for(var i=0;i<items.length;i++)
					{
						items[i].checked=true;
					}
					btn05.checked=true;
					
				})
				
				//全不选
				myClick("btn02",function()
				{
					var items=document.getElementsByName("items");
					for(var i=0;i<items.length;i++)
					{
						items[i].checked=false;
					}
					btn05.checked=false;
				})
				
				//反选
				myClick("btn03",function()
				{
					var items=document.getElementsByName("items");
					for(var i=0;i<items.length;i++)
					{
						if(items[i].checked==true)
						{
							items[i].checked=false;
						}
						else
						{
							items[i].checked=true;
						}
					}
					//items[i].checked=!items[i].checked;
				})
				
				
				//提交
				myClick("btn04",function()
				{
					var items=document.getElementsByName("items");
					for(var i=0;i<items.length;i++)
					{
						if(items[i].checked==true)
						{
							alert(items[i].value);
						}
					}
				})
				
				
				//全选/全不选
				myClick("btn05",function(){
					var items=document.getElementsByName("items");
					for(var i=0;i<items.length;i++)
					{
						items[i].checked=this.checked;   //this相当于btn05，响应函数是给谁绑定的this就是谁
					}
				})
			
			   var items=document.getElementsByName("items");
			   var btn05=document.getElementById("btn05");
			   for(var j=0;j<items.length;j++)
			   {
				  
			    items[j].onclick=function()
				{
					 btn05.checked=true;
					for(var i=0;i<items.length;i++)
					{
						if(!items[i].checked)
						{
							btn05.checked=false;
							break;
						}
					}
				}
				}
				
				
				
			}
		</script>
		<title></title>
	</head>
	<body>
		
		<p>你爱好的运动是？<input type="checkbox"  id="btn05" />全选/全不选</p>  <!-- 不写value的话默认是on-->
		
		<p><input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球"/>篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球"/>乒乓球</p>
		
		
		<p><input id="btn01" type="button" value="全选"/>
		<input id="btn02" type="button" value="全不选"/>
		<input id="btn03" type="button" value="反选"/>
		<input id="btn04" type="button" value="提交"/></p>
	</body>
</html>